<template>
<div style="width:1200px;margin: 30px auto;">
    <el-row :gutter="20">
        <el-col :span="18">
            <el-card style="margin-bottom: 20px">
                <h2 style="color: #00CB8E;font: 30px '微軟正黑體 Light';margin-left: 10px">
                    {{content.title}}
                </h2>
                <p style="font-size: 12px;color: #666;margin-left: 10px">
                    作者:{{content.name}} | {{content.duty}} | {{content.depTitle}} | 发布时间:{{content.gmtCreate}} | 阅读次数:{{content.viewCount}}
                </p>
                <el-divider></el-divider>
                <div>
                    <el-card style="font-size: 13px;">
                        <b style="color: #00CB8E">摘要:</b>
                        {{content.brief}}
                    </el-card>
                    <p style="font-size: 16px;margin: 30px 10px 30px 10px" v-html="content.content"></p>
                </div>
            </el-card>
            <!--参考文献开始-->
            <el-card>
                <p>参考文献</p>
                <el-divider></el-divider>
                <el-row style="margin-top: 20px">
                    <p style="margin: 5px 0; font: 13px '微軟正黑體 Light'" v-html="content.reference"></p>
                </el-row>
            </el-card>
            <!--参考文献结束-->
        </el-col>
        <el-col :span="6">
            <el-card class="right_top_card">
                <div style="background-color: #00CB8E;height: 90px">
                </div>
                <div style="text-align: center;position: relative;bottom: 50px">
                    <img :src="content.avatar" style="
                        width: 90px;height: 90px;border-radius: 90px;border:5px solid white">
                    <p style="font-size: 20px;margin: 0;font-weight: bold">{{content.name}}</p>
                    <i class="el-icon-edit">本文作者</i><br>
                    <i class="el-icon-time">{{content.gmtModified}}</i>
                </div>
            </el-card>
            <!--作者其它文章开始-->
<!--            <el-card style="margin: 10px 0">
                <h3>作者其它文章</h3>
                <el-divider></el-divider>
                <el-row :gutter="10" v-for="c in otherArr">
                    <el-col :span="10">
                        <a :href="'/detail.html?id='+c.id"><img :src="c.imgUrl" width="100%" height="70px"></a>
                    </el-col>
                    <el-col :span="14">
                        <a :href="'/detail.html?id='+c.id">
                            <p class="title_p">{{c.title}}</p>
                        </a>
                        <i class="el-icon-time">{{c.createTime}}</i>
                    </el-col>
                </el-row>
            </el-card>-->
            <!--作者其它文章结束-->
            <!--热门文章开始-->
            <el-card style="margin: 10px 0">
                <h3>热门文章</h3>
                <el-divider></el-divider>
                <div style="height: 50px;margin-bottom: 20px" v-for="item in hotArr">
                    <span style="font-size: 12px;color: #666 ">
                        <a :href="'/encDetail?articleId='+item.id">{{item.title}}</a>
                        {{item.name}}  {{item.depTitle}}
                    </span>
                    <p class="hotHospital">{{item.hospital}}</p>
                    <el-divider></el-divider>
                </div>
            </el-card>
            <!--热门文章结束-->
        </el-col>
    </el-row>
</div>
</template>
<style>
body{
    background-color: rgb(241,242,243);
}
.el-header{
    background-color: white;
}
.center{width: 1200px;margin: 0 auto}
footer h3{
    color: white;
}
#footer_center p{
    margin: 0;
}
/*因为el-card是由多个div组成的,直接通过类选择器只能选择到外层的div
而自带的内边距是内层div添加的,所以需要通过子元素选择器*/
.right_top_card>div{
    padding: 0;
}
.title_p{
    height: 40px;
    overflow: hidden;
    /*设置超出的部分用省略号展示*/
    display: -webkit-box;
    -webkit-line-clamp:2; /*设置显示的行数*/
    -webkit-box-orient: vertical;  /*设置纵向排列*/
    margin: 0;
}
.hotHospital{
    /*设置超出的部分用省略号展示*/
    display: -webkit-box;
    -webkit-line-clamp:1; /*设置显示的行数*/
    -webkit-box-orient: vertical;  /*设置纵向排列*/
    margin: 0;
}
a{
    text-decoration: none;
    color: black;
    font:18px "微軟正黑體 Light";
}
a:hover{
    color: #69bb55;
}

</style>
<script>
import axios from "axios";
import BaseUrl from "@/http/BaseUrl";
import SimpleAxios from "@/http/SimpleAxios";

export default {
    data(){
        return{
            content:[],
            otherArr:[],
            hotArr:[]
        }
    },
    methods: {
        loadHot(depId){
            let hotUrl=BaseUrl.INDEX+'/encyclopedia/detail/hot/'+depId;
            console.log('hotUrl='+hotUrl);
            SimpleAxios.get(hotUrl).then((response)=>{
                if(response.data.state===20000){
                    this.hotArr=response.data.data;
                    console.log(this.hotArr)
                }
            })
        }

    },
    created() {
        let articleId=new URLSearchParams(location.search).get("articleId");
        let url=BaseUrl.INDEX+'/encyclopedia/'+articleId+'/detail';
        console.log('url='+url);
        SimpleAxios.get(url).then((response)=>{
            let jsonResult=response.data;
            if (jsonResult.state===20000){
                this.content=jsonResult.data[0];
                console.log(this.content);
                let depId=this.content.department;
                this.loadHot(depId);

            }
        });
    },
    mounted() {

    }
}
</script>